<template>
    <div class="container">
        <div class="heade">
            <div class="header">
                <span class="text">筛选查询</span>
                <button type="success" class="info">查询结果</button>
            </div>
            <div class="heade-text">
                <el-form ref="form" :model="form" label-width="80px" class="heade-form">
                    <el-form-item label="出库日期">
                        <el-date-picker
                        v-model="form.date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="出库仓库">
                        <el-select v-model="form.stock" placeholder="请选择供货厂商" style="width: 200px;">
                            <el-option label="仓库A" value="仓库A"></el-option>
                            <el-option label="仓库B" value="仓库B"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户名称">
                        <el-select v-model="form.client_name" placeholder="请选择供货厂商" style="width: 200px;">
                            <el-option label="客户A" value="客户A"></el-option>
                            <el-option label="客户B" value="客户B"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核状态">
                        <el-select v-model="form.examine_type" placeholder="请选择活动区域" style="width: 200px;">
                            <el-option label="待审批" value="待审批"></el-option>
                            <el-option label="不通过" value="不通过"></el-option>
                            <el-option label="已通过" value="已通过"></el-option>
                            <el-option label="已入库" value="已入库"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="between">
            <div class="header">
                <span class="text">数据列表</span>
                <button type="success" class="info1">添加</button>
                <button type="success" class="info">导出</button>
            </div>
            <div class="between-table">
                <el-table
                    :header-cell-style="{fontSize: '14px',textAlign: 'center'}" 
                    :cell-style="{fontSize: '12px',textAlign: 'center'}"
                    ref="multipleTable"
                    :data="tableData"
                    border
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="编号" width="60">
                        <template slot-scope="scope">{{ scope.row.receipt_id }}</template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="创建日期" width="160"></el-table-column>
                    <el-table-column prop="outbound" label="出库仓库"></el-table-column>
                    <el-table-column prop="employee" label="业务员"></el-table-column>
                    <el-table-column prop="total" label="总金额"></el-table-column>
                    <el-table-column prop="out_time" label="出库时间" width="160"></el-table-column>
                    <el-table-column prop="people" label="发起人"></el-table-column>
                    <el-table-column prop="approval" label="审批人"></el-table-column>
                    <el-table-column prop="status" label="状态"></el-table-column>
                    <el-table-column prop="examine" label="审批操作"></el-table-column>
                    <el-table-column prop="option" label="操作"><span class="column">编辑</span><span class="column">预览</span><span class="column">删除</span></el-table-column>
                </el-table>
                <div style="margin-top: 20px; display: flex; ">
                    <el-button @click="toggleSelection()">取消选择</el-button>
                    <div class="block">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage3"
                        :page-size="100"
                        layout="prev, pager, next, jumper"
                        :total="1000">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    data() {
      return {
        form: {
          date: '',
          stock:'',
          client_name: '',
          examine_type:'',
        },
        tableData: [{
          receipt_id: '1001',
          create_time: '2023-03-02 12:12:12',
          outbound: '仓库A',
          employee: '员工A',
          total: '9999.99',
          out_time: '2023-03-02 12:12:12',
          people: 'A员工',
          approval: 'B员工',
          status:'已通过',
          examine: '审批', 
        },
        ],
        multipleSelection: [],
      }
    },   
     methods: {
      toggleSelection(rows) {
        this.$refs.multipleTable.clearSelection();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
}

</script>

<style scoped>
.heade-text{
    border: 1px solid rgba(228, 228, 228, 1);
    text-align: center;
}
.heade-form{
    display:flex;
    position: relative;
    top: 12px;
}
.text{
    font-size: 14px;
    position: absolute;
    left: 12px;
}
.info1{
    font-size: 14px;
    position: absolute;
    right: 70px;
    top: 14px;
}
.info{
    font-size: 14px;
    position: absolute;
    right: 12px;
    top: 14px;
}
.header{
    position: relative;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(243, 243, 243, 1);
    border: 1px solid rgba(228, 228, 228, 1);
}
.between .header{
    margin-top: 20px;
}
.column{
    font-size: 14px;
    margin-right: 5px;
}
</style>